<template>
  <div>
    <div class="row-header" :style="{'overflow-x':$store.state.app.screenWidth<450?'scroll':'auto'}">
      <!--移动/联通/电信/所有-->
      <div class="row-btn-block" :style="{'width': $store.state.app.screenWidth<550?'550':'90%'}">
        <template v-for="item in cardOprations">
          <div :class="['row-btn-block-item', cardOperator==item.name?item.color:'']" @click="handleClick(item.name)">
            <img v-if="cardOperator==item.name" :src="item.img2" />
            <img v-if="cardOperator!=item.name" :src="item.img1" />
            <span>{{item.label}}</span>
          </div>
        </template>
      </div>
      <!--卡表搜索条件表单-->
      <el-form :model="searchForm" ref="searchForm" :rules="rules" label-width="60px" :inline="true" :style="{'width': $store.state.app.screenWidth<550?'550px':'100%'}">
<!--        客户账号-->
        <el-form-item label=" " prop="loginName">
          <el-autocomplete
            class="inline-input"
            style="width: 300px"
            v-model="searchForm.loginName"
            :fetch-suggestions="querySearch"
            :trigger-on-focus="false"
            placeholder="请输入代理账号">
          </el-autocomplete>
        </el-form-item>
<!--        业务号码-->
        <el-form-item label=" " prop="operatorNumber">
          <el-input style="width: 300px" v-model.trim="searchForm.operatorNumber"
                    :placeholder="operatorNumberPlaceholder"></el-input>
        </el-form-item>
<!--        卡状态-->
        <el-form-item label=" " prop="dictChannelCardStatus">
          <el-select v-model="searchForm.dictChannelCardStatus" placeholder="请选择卡状态"  style="width: 300px">
            <el-option v-for="item in dictChannelCardStatusOptions" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
<!--        套餐大类-->
        <el-form-item label=" " prop="setMealHeadId" v-has="'notCardActivation'">
          <el-select v-model="searchForm.setMealHeadId" placeholder="请选择套餐大类" style="width: 300px">
            <el-option v-for="item in setMealHeadOptions" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
<!--        通道-->
        <el-form-item label=" " prop="accountId" v-has="'notCardActivation'">
          <el-select v-model="searchForm.accountId" style="width: 300px" placeholder="请选择通道">
            <el-option v-for="item in accountOptions" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
<!--        实名通道-->
        <el-form-item label=" " prop="realName" v-has="'notCardActivation'">
          <el-select v-model="searchForm.realName" style="width: 300px" placeholder="请选择实名通道">
            <el-option v-for="item in realNameOptions" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
<!--        实名状态-->
        <el-form-item label=" " prop="realNameFlag">
          <el-select v-model="searchForm.realNameFlag" placeholder="请选择实名状态"  style="width: 300px">
            <el-option v-for="item in realNameFlagOptions" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
<!--        出库状态-->
        <el-form-item label=" " prop="startNo">
          <el-select v-model="searchForm.notOut" placeholder="请选择出库状态"  style="width: 300px">
            <el-option v-for="item in notOutOptions" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <!--        充值次数-->
        <el-form-item label=" " prop="frequency">
          <el-input placeholder="请输入充值次数" v-model.trim="searchForm.frequency" style="width:300px">
            <template slot="append">次</template>
          </el-input>
        </el-form-item>
<!--        号段-->
        <el-form-item label=" " prop="startNo">
          <el-input v-model.trim="searchForm.startNo" style="width:auto;" placeholder="请输入起始业务号码"></el-input>
          <span style="margin: 0 5px"> 至 </span>
          <el-input v-model.trim="searchForm.endNo" style="width:auto;" placeholder="请输入结束业务号码"></el-input>
        </el-form-item>
        <el-form-item label=" " prop="phone">
          <el-input placeholder="手机号" v-model.trim="searchForm.phone" style="width:300px">
          </el-input>
        </el-form-item>
      </el-form>
      <div class="row-form-btn">
        <el-button type="shenda" size="mini" icon="el-icon-search" @click="searchData('searchForm')">查询</el-button>
        <el-button type="shenda" size="mini" icon="el-icon-refresh-right" @click="resetForm('searchForm')">重置</el-button>
        <el-button type="shenda" size="mini" icon="el-icon-download" @click="downloadData">导出Excel</el-button>
      </div>
    </div>
    <div class="split-line"></div>
    <div class="row-main">
      <!--批量按钮 直接拉起confirm框的走doSomeAct方法 其他的走各自弹窗，最后在执行doSomeAct方法-->
      <div class="row_top" :style="{'padding':this.$store.state.app.screenWidth>=1850?'10px 0':'0','height':this.$store.state.app.screenWidth>=1850?'40px':'auto'}">
        <div class="row_top_1" :style="{'display':this.$store.state.app.screenWidth>=1850?'inline-flex':'flex','width':this.$store.state.app.screenWidth>=1850?'700px':'100%'}">
          <el-button type="shenda" size="mini" icon="el-icon-refresh" @click="refreshPage">刷新数据</el-button>
          <el-button type="shenda" size="small" v-preventReClick
                     @click="doSomeAct(tableChecked, '批量设置停机', 12)" v-has="'notCardStop'">批量设置停机
          </el-button>
          <el-button type="shenda" size="small" v-preventReClick
                     @click="doSomeAct(tableChecked, '批量设置激活', 13)" v-has="'notCardActivation'">批量设置激活
          </el-button>
          <el-button type="shenda" size="small" v-preventReClick
                     @click="doSomeAct(tableChecked, '批量设置待激活', 14)" v-has="'notCardToBeActivated'">批量设置待激活
          </el-button>
          <el-button type="shenda" size="small" v-preventReClick @click="doSomeAct(tableChecked, '批量更新', 15)"
                     v-has="'showToBeActivatedTip'">批量更新
          </el-button>
          <el-button type="shenda" size="small" v-preventReClick @click="speedLimit(tableChecked)"
                     v-has="'showToBeActivatedTip'">批量设置限速
          </el-button>
          <el-button type="shenda" size="small" v-preventReClick @click="UnlockCard('unlockForm')" v-has="'cardUnlockPower'">机卡重绑</el-button>
        </div>
        <div class="row_top_2" v-has="'oemCardStaticsPower'" :style="{'display':this.$store.state.app.screenWidth>=1850?'inline-flex':'flex','margin':this.$store.state.app.screenWidth>=1850?'0':'10px','overflow-x': $store.state.app.screenWidth<992?'scroll':'auto', 'justify-content':$store.state.app.screenWidth<992?'flex-start':'space-between'}">
<!--          <div style="min-width: 120px;text-align: center"><b>总条数：</b><span class='btn_text_none' style="color:#606266"> {{ totalAccount }}</span> <b>条</b></div>-->
          <div class="row_top_item" @click="doSearch('WARNING')" style="cursor: pointer">
            <el-button type="shenda" round size="small"><b>总条数：</b><span class='btn_text'>{{ totalAccount }}</span> <b>条</b></el-button>
          </div>
          <div class="row_top_item" @click="doSearch('WARNING')" style="cursor: pointer">
            <el-button type="shenda" round size="small"><b>静默期预警：</b><span class='btn_text'>{{ warningAccount }}</span> <b>条</b></el-button>
          </div>
          <div class="row_top_item" @click="doSearch('WARNING')" style="cursor: pointer">
            <el-button type="shenda" round size="small"><b>预警时间 提前：</b><span class='btn_text'>{{ warningDay }}</span> <b>天</b></el-button>
          </div>
<!--          <div style="min-width: 160px;text-align: center"><b>预警时间 提前：</b><span class='btn_text_none' style="color:#606266">{{ warningDay }}</span> <b>天</b></div>-->
          <div class="row_top_item" @click="doSearch('ACTIVATE')" style="cursor: pointer">
            <el-button type="shenda" round size="small"><b>已激活：</b><span class='btn_text'>{{ activeAccount }}</span> <b>条</b></el-button>
          </div>
          <div class="row_top_item" @click="doSearch('DEACTIVATED')" style="cursor: pointer">
            <el-button type="shenda" round size="small"><b>未激活：</b><span class='btn_text'>{{ unActiveAccount }}</span> <b>条</b></el-button>
          </div>
        </div>
      </div>
      <!--表格数据-->
      <el-table v-has="'cardListOemListTable'" :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }"
                style="width: auto;"
                :data="tableData" ref="selectTable" tooltip-effect="dark" class="row-main-table" @selection-change="handleSelectionChange"
                v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)"
                @sort-change="changeSort" :row-key="getRowKeys" >
        <el-table-column type="selection" :reserve-selection="true" align="center" fixed="left" ></el-table-column>
        <el-table-column sortable="custom" prop="cardNumber" label="业务号码" align="center" fixed="left">
          <template slot-scope="scope">
            <div class="cardNumberContent">
              <el-tooltip effect="light" content="点击复制" placement="top">
                <div style="text-decoration:underline;cursor:pointer" @click="copy(scope.row.cardNumber)">
                  {{ scope.row.cardNumber }}
                </div>
              </el-tooltip>
              <el-tooltip effect="light" content="查看详情" placement="right">
                <i class="el-icon-search" @click="getCardDetail(scope.row)"></i>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column sortable="custom" prop="iccid" label="ICCID" fixed v-if="checkPer('iccidPer')" width="200">
          <template slot-scope="scope">
            <el-tooltip effect="light" content="点击复制" placement="top">
              <div style="text-decoration:underline;cursor:pointer" @click="copy(scope.row.iccid)">{{ scope.row.iccid }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="lastAgent" label="客户账号" ></el-table-column>
        <el-table-column align="center" prop="setMealHeadName" label="套餐组名称" ></el-table-column>
        <el-table-column align="center" prop="dictChannelCardStatusName" label="卡状态" ></el-table-column>
        <el-table-column align="center" prop="updownLimitLabel" label="上/下行限速"
                         v-if="checkPer('curentFlowForMonthUPer')"></el-table-column>
        <el-table-column align="center" prop="usedFlow" label="总使用量" v-if="checkPer('curentFlowForMonthVPer')"
                         sortable="custom"></el-table-column>
        <el-table-column align="center" prop="cardFlowActUsed" label="本月已用"
                         sortable="custom"
                         v-if="checkPer('curentFlowForMonthUPer')" ></el-table-column>
        <el-table-column align="center" prop="allFlow" label="套餐总量"
                         v-if="checkPer('curentFlowForMonthVPer')"></el-table-column>
        <el-table-column align="center" prop="surplusFlowForSetMeal" label="剩余"
                         v-if="checkPer('curentFlowForMonthVPer')"></el-table-column>
        <el-table-column align="center" prop="frequency" label="充值次数"
                         v-if="checkPer('displayBalancePer')">
          <template slot-scope="scope">
            <span v-if="scope.row.frequency">{{scope.row.frequency}} 次</span>
            <span v-else>0 次</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="balance" label="余额"
                         v-if="checkPer('displayBalancePer')"></el-table-column>
        <el-table-column align="center" prop="dictUpCompanyRealName" label="实名状态"
                         v-if="checkPer('curentFlowForMonthVPer')">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="已实名" placement="top"
                        v-if="scope.row.dictUpCompanyRealName==='C_YES'">
              <img src="../../../assets/images/user.png"/>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="未实名" placement="top" v-else>
              <img src="../../../assets/images/user1.png"/>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="realName" label="实名通道" v-if="checkPer('curentFlowForMonthVPer')&&roleChar!='DAILI_ADMIN'" ></el-table-column>
        <el-table-column align="center" prop="insertTimeDate" label="创建时间" sortable="custom" width="130"></el-table-column>
        <el-table-column align="center" prop="cardRemark" label="备注" width="60">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.remarks" placement="top-start">
              <div style="width: 60px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;cursor: pointer">{{scope.row.remarks}}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="cardCount" label="操作" width="100" >
          <template slot-scope="scope">
            <el-dropdown trigger="click" :hide-on-click="false" @command="handleCommand">
              <span class="el-dropdown-link">
                <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button style="width: 100%;" class="operation" type="text" v-preventReClick @click="doSomeAct(scope.row,综合详情,1)"
                             v-has="'cardDetailIndexPer'">详情
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button style="width: 100%;" class="operation" type="text" v-preventReClick @click="doSomeAct(scope.row,'更新',2)">更新
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button style="width: 100%;" class="operation" type="text" v-preventReClick @click="doSomeAct(scope.row,'停机',3)"
                             :disabled="scope.row.dictChannelCardStatus === 'PAUSE' || scope.row.dictChannelCardStatus === 'DEACTIVATED'"
                             v-has="'notCardSingleStop'">停机
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button style="width: 100%;" class="operation" type="text" v-preventReClick @click="doSomeAct(scope.row,'激活',4)" :disabled="scope.row.dictChannelCardStatus === 'ACTIVATE'" v-has="'notCardSingleActivate'">激活</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button style="width: 100%;" class="operation" type="text" v-preventReClick @click="doSomeAct(scope.row,'待激活',5)" :disabled="scope.row.dictChannelCardStatus === 'DEACTIVATED' || scope.row.dictChannelCardStatus === 'PAUSE'" v-has="'notCardSingleDeactivate'">待激活</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button style="width: 100%;" class="operation" type="text" v-preventReClick @click="speedLimit(scope.row)" v-has="'limitSpeedSinglePer'">限速</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button style="width: 100%;" class="operation" type="text" v-preventReClick @click="changeCard(scope.row)" v-show="scope.row.dictChangeCardFlag !== 'BECHANGED'" v-has="'changeCardPer'">换卡</el-button>
                </el-dropdown-item>
                <el-dropdown-item v-if="scope.row.btnDisplay">
                  <el-button style="width: 100%;" class="operation" type="text" v-preventReClick @click="doSomeAct(scope.row,'取消换卡',8)" v-if="scope.row.dictChangeCardFlag === 'BECHANGED'" v-has="'removeChangeCardPer'">取消换卡
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item v-if="scope.row.btnDisplay">
                  <el-button style="width: 100%;" class="operation" type="text" v-preventReClick @click="changeCardBalance(scope.row)" v-has="'updateBalancePer'">更改余额</el-button>
                </el-dropdown-item>
<!--                updateRemarkPer-->
                <el-dropdown-item v-if="scope.row.btnDisplay">
                  <el-button style="width: 100%;" class="operation" type="text" v-preventReClick @click="changeCardRemark(scope.row)" v-has="'updateRemarksPer'">修改备注</el-button>
                </el-dropdown-item>
                <el-dropdown-item v-if="scope.row.btnDisplay">
                  <el-button style="width: 100%;" class="operation" type="text" v-preventReClick @click="doSomeAct(scope.row,'重置换卡次数',10)" v-has="'numOfReplaceCardPer'" >重置换卡次数
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item v-if="scope.row.btnDisplay">
                  <el-button style="width: 100%;" class="operation" type="text" v-preventReClick @click="doSomeAct(scope.row,'重置手机号',11)" v-has="'replaceTelPer'" >重置手机号
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item :command="scope.row" v-if="!scope.row.btnDisplay&&(roleChar=='OEM_ADMIN'||roleChar=='OEM_OTHER')" divided >
                  <el-button style="width: 100%;" class="operation" type="text" v-preventReClick>更多</el-button>
                </el-dropdown-item>
                <el-dropdown-item :command="scope.row" v-if="scope.row.btnDisplay&&(roleChar=='OEM_ADMIN'||roleChar=='OEM_OTHER')" divided >
                  <el-button style="width: 100%;" class="operation" type="text" v-preventReClick>收起</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
        <el-pagination
          background
          @current-change="changPage"
          @size-change="changSize"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="total"
          :current-page.sync="page"
          layout="total, sizes, prev, pager, next, jumper"
          class="row-main-pager">
        </el-pagination>
      </div>
    </div>
    <!-- 弹窗 -- 限速 -->
    <el-dialog class="delete" top="33vh" :visible.sync="showBatchToLimit" :append-to-body="true" width="500px">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="上行限速" label-width="80px" v-if="channelCompanyId!=14 && channelCompanyId!=47">
          <el-select v-model="upRateLimitingSerch" placeholder="请选择卡状态" style="width: 70%;" size="small">
            <el-option v-for="rate in upRateLimiting" :key="rate.value" :label="rate.label"
                       :value="rate.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下行限速" label-width="80px" v-if="channelCompanyId!=14 && channelCompanyId!=47">
          <el-select v-model="downRateLimitingSerch" placeholder="请选择卡状态" style="width: 70%;" size="small">
            <el-option v-for="rate in downRateLimiting" :key="rate.value" :label="rate.label"
                       :value="rate.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上行限速cmp" label-width="80px" v-if="channelCompanyId==14 || channelCompanyId==47">
          <el-select v-model="upRateLimitingSerchCMP" placeholder="请选择卡状态" style="width: 70%;" size="small">
            <el-option v-for="rate in upRateLimitingCMP" :key="rate.value" :label="rate.label"
                       :value="rate.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer">
      <el-button @click="showBatchToLimit = false" size="small">取 消</el-button>
      <el-button type="primary" @click="doSomeAct(null,'限  速',6)" size="small" v-preventReClick>确 定</el-button></span>
    </el-dialog>
    <!-- 弹窗 -- 换卡 -->
    <el-dialog :title="changeCardTitle" top="28vh" :visible.sync="showChangeCardDialog" :append-to-body="true"
               width="500px">
      <el-form ref="changeCardForm" :model="changeCardForm" label-width="130px" :rules="changeCardRules">
        <el-form-item label="首张(金额)" prop="basePrice">
          <el-input type="number" size="small" v-model="changeCardForm.basePrice"></el-input>
        </el-form-item>
        <el-form-item label="叠加(金额)" prop="overlyPrice">
          <el-input type="number" size="small" v-model="changeCardForm.overlyPrice"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" size="small" v-model="changeCardForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer">
      <el-button @click="showChangeCardDialog = false" size="small">取 消</el-button>
      <el-button type="primary" @click="doSomeAct(card,'换  卡',7)" size="small">确 定</el-button></span>
    </el-dialog>
    <!-- 弹窗 -- 更改余额 -->
    <el-dialog class="accountRecharge" :title="'更改余额'" top="28vh" :visible.sync="showBalanceDialog"
               :append-to-body="true" width="500px">
      <el-form :model="balanceForm" label-width="90px">
        <el-form-item label="余额" :rules="[
          { required: true, message: '请输入要修改的余额', tigger: 'blur' },
          { pattern: /^(\-|\+)?\d+(\.\d{1,2})?$/, message: '请填写正确的金额,保留两位小数' },
        ]">
          <el-input size="small" v-model="balanceForm.balance" style="width:300px;">
            <el-button slot="append">元</el-button>
          </el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer">
      <el-button @click="showBalanceDialog = false" size="small">取 消</el-button>
      <el-button type="primary" @click="doSomeAct(card,'更改余额',9)" size="small">确 定</el-button></span>
    </el-dialog>
    <!-- 弹窗 -- 查看卡详情 -->
    <el-dialog class="accountView cardDetail" title="卡详情" :visible.sync="showCardDetailDialog" :append-to-body="true"
               width="500px">
      <div style="height: 50vh;overflow-y: scroll">
        <el-form :model="cardForm" ref="cardForm" label-width="150px">
          <el-form-item prop="firstAgent" label="一级代理名称：" v-show="cardForm.thirdAgent == null"
                        v-if="checkPer('curentFlowForMonthVPer')">
            <el-input v-model="cardForm.firstAgent" size="small" readonly></el-input>
          </el-form-item>
          <el-form-item prop="lastAgent" label="末级代理名称：" v-show="cardForm.thirdAgent == null"
                        v-if="checkPer('curentFlowForMonthVPer')">
            <el-input v-model="cardForm.lastAgent" size="small" readonly></el-input>
          </el-form-item>
          <el-form-item prop="thirdAgent" label="下级代理名称：" v-show="cardForm.lastAgent == null">
            <el-input v-model="cardForm.thirdAgent" size="small" readonly></el-input>
          </el-form-item>
          <el-form-item prop="shebeihao" label="设备号：" v-show="cardForm.dicTypeL=='DONGLE'">
            <el-input v-model="cardForm.shebeihao" size="small" readonly></el-input>
          </el-form-item>
          <el-form-item prop="cardNumber" label="卡号：" v-if="checkPer('curentFlowForMonthVPer')">
            <el-input v-model="cardForm.cardNumber" size="small" readonly></el-input>
          </el-form-item>
          <el-form-item prop="ICCID" label="ICCID：" v-if="checkPer('curentFlowForMonthVPer')">
            <el-input v-model="cardForm.ICCID" size="small" readonly></el-input>
          </el-form-item>
          <el-form-item prop="imsi" label="IMSI：" v-if="checkPer('curentFlowForMonthVPer')" v-show="oemFlag == 'OEM'">
            <el-input v-model="cardForm.imsi" size="small" readonly v-show="oemFlag == 'OEM'"></el-input>
          </el-form-item>
          <el-form-item prop="msisdn" label="MSISDN：" v-if="checkPer('curentFlowForMonthVPer')"
                        v-show="oemFlag == 'OEM'">
            <el-input v-model="cardForm.msisdn" size="small" readonly v-show="oemFlag == 'OEM'"></el-input>
          </el-form-item>
          <el-form-item prop="dictCardOperatorName" label="运营商：">
            <el-input v-model="cardForm.dictCardOperatorName" size="small" readonly></el-input>
          </el-form-item>
          <el-form-item prop="mealArray" label="套餐：">
            <el-input v-model="cardForm.mealArray" size="small" readonly></el-input>
          </el-form-item>
          <el-form-item prop="dictChannelCardStatusName" label="状态：">
            <el-input v-model="cardForm.dictChannelCardStatusName" size="small" readonly></el-input>
          </el-form-item>
          <el-form-item prop="beginTime" label="套餐开始时间：">
            <el-input v-model="cardForm.beginTime" size="small" readonly></el-input>
          </el-form-item>
          <el-form-item prop="endTime" label="套餐结束时间：">
            <el-input v-model="cardForm.endTime" size="small" readonly></el-input>
          </el-form-item>
          <el-form-item prop="customerNickName" label="C端客户名：">
            <el-input v-model="cardForm.customerNickName" size="small" readonly></el-input>
          </el-form-item>
          <el-form-item prop="phone" label="手机号：" v-if="roleChar.indexOf('OEM')>-1">
            <el-input v-model="cardForm.phone" size="small" readonly></el-input>
          </el-form-item>
          <el-form-item prop="accountName" label="通道名称：" v-if="roleChar.indexOf('OEM')>-1">
            <el-input v-model="cardForm.accountName" size="small" readonly></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="closeCardForm('cardForm')" size="small">关 闭</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!--  机卡重绑  -->
    <el-dialog title="机卡重绑" :visible.sync="showUnlockDialog" :width="$store.state.app.state<500?'100%':'500px'" center :close-on-click-modal="false">
      <el-form :model="unlockForm" ref="unlockForm" label-width="100px" :label-position="$store.state.app.state<500?'top':'right'">
        <el-form-item prop="account" label="通道" :rules="{required: true,message:'请选择通道',trigger:'change'}">
          <el-select v-model="unlockForm.account" @change="changeAccount">
            <el-option v-for="item in bindAccountOptions" :key="item.value" :label="item.label" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="iccid" label="iccid" :rules="{required: true,message:'请输入iccid',trigger:'blur'}" >
          <el-input v-model.trim="unlockForm.iccid" style="width: 200px" @blur="getMsisdn"></el-input>
        </el-form-item>
        <el-form-item prop="msisdn" label="msisdn" :rules="{required: true,message:'请输入msisdn',trigger:'blur'}">
          <el-input v-model.trim="unlockForm.msisdn" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item prop="name" label="姓名" :rules="{required: true,message:'请输入姓名',trigger:'blur'}" v-if="unlockForm.dictOperator!='CMPTELECOM'">
          <el-input v-model="unlockForm.name" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="电话" style="width: 200px" :rules="{required: true,message:'请输入电话',trigger:'blur'}" v-if="unlockForm.dictOperator!='CMPTELECOM'">
          <el-input v-model.trim="unlockForm.phone" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item prop="imei" label="手机串码" style="width: 200px" :rules="{required: false,message:'请输入串码',trigger:'blur'}" v-if="unlockForm.dictOperator!='CMPTELECOM'">
          <el-input v-model.trim="unlockForm.imei" style="width: 200px"></el-input>
        </el-form-item>  		
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="showUnlockDialog = false">取 消</el-button>
          <el-button type="primary" @click="unlockSubmit" v-preventReClick>确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹窗 -- 修改卡板备注 -->
    <el-dialog title="修改卡板备注" top="28vh" :visible.sync="showRemarkDialog" :append-to-body="true" width="500px">
      <el-form ref="actForm" :model="actForm" label-width="70px" >
        <el-form-item label="卡板备注">
          <el-input type="textarea" size="small" v-model="actForm.remark" maxlength="20" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer">
      <el-button @click="showRemarkDialog = false" size="small">取 消</el-button>
      <el-button type="primary" @click="doSomeAct(card,'修改卡板备注',16)" size="small">确 定</el-button></span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getLoginName,
  crmCardList,
  selectStatistics,
  stopCardHandle,
  activationCardHandle,
  toBeActivatedCardHandle,
  singleUpdate,
  getCardDetail,
  refresh,
  markCardChangeFlag,
  selectIsOEMFlag,
  initSetMealHeadSelect,
  initAccountSelect,
  getCardFlowInfo,
  cancelChange,//取消换卡
  updateCardBalance,
  resetChangeCount,//重置换卡次数
  resetPhoneNumber,
  cardUnlockForOem,//机卡解绑
  downloadCardList,//卡板导出
  searchMsisdn,//iccid查询msisdn
  getRealnameChannelList,//实名通道列表
  updateCardRemark,//修改备注
} from '@/api/getData'
import {is2PoinFloat,isZeroOr2PointFloat} from '@/utils/validate';
import icon_s1 from "@/assets/images/icon-s1.png";
import icon_s2 from "@/assets/images/icon-s2.png";
import icon_y1 from "@/assets/images/icon-y1.png";
import icon_y2 from "@/assets/images/icon-y2.png";
import icon_d1 from "@/assets/images/icon-d1.png";
import icon_d2 from "@/assets/images/icon-d2.png";
import icon_l1 from "@/assets/images/icon-l1.png";
import icon_l2 from "@/assets/images/icon-l2.png";
import gaungdian from "@/assets/images/guangdian.png";

export default {
  name: "newIndex",
  data() {
    const validateFirstCard = (rule, value, callback) => {
      if (!isZeroOr2PointFloat(value)) {
        callback(new Error('请输入非负数，且保留小数点后两位'))
      } else {
        callback()
      }
    };
    const validateMoreCard = (rule, value, callback) => {
      if (!isZeroOr2PointFloat(value)) {
        callback(new Error('请输入非负数，且保留小数点后两位'))
      } else {
        callback()
      }
    };
    return {
      roleChar:localStorage.getItem("roleChar"),
      totalAccount: '--',
      warningAccount: '--',
      warningDay: '--',
      activeAccount: '--',
      unActiveAccount: '--',
      oemFlag: '',
      operatorNumberPlaceholder: '',
      cardOperator: 'ALL',
      cardOperatorLabel: '所有卡',
      cardNumber: '',
      tableChecked: [],
      showUnlockDialog: false,
      searchForm: {
        loginName: '',        //客户账号
        operatorNumber: '',   //业务号码
        dictChannelCardStatus: '',//卡状态
        startNo: '',
        endNo: '',
        setMealHeadId: '',  //套餐大类
        accountId: '',      //通道id
        notOut: '',         //出库状态
        realNameFlag: '',   //实名状态
        realName: '',       //实名通道
        frequency: '',      //充值次数
        phone:''
      },
      rules: {
        operatorNumber: [
          {
            validator: (rule, value, callback) => {
              let reg = /^[A-Za-z0-9]{5,20}$/;
              if (value && !reg.test(value)) {
                callback(new Error('请修改业务号码，长度为5-20位数字格式'));
                return false;
              }
              callback();
            }
          }
        ],
        startNo: [
          {
            validator: (rule, value, callback) => {
              let reg = /^[A-Za-z0-9]{5,20}$/;
              let endNo = this.searchForm.endNo;
              if (value && !reg.test(value)) {
                callback(new Error('请修改起始号码，长度为5-20位数字格式'));
                return false;
              }
              if (endNo && !reg.test(endNo)) {
                callback(new Error('请修改结束号码，长度为5-20位数字格式'));
                return false;
              }
              if (value && !endNo) {
                callback(new Error('请输入结束号码，长度为5-20位数字格式'));
                return false;
              }
              if (!value && endNo) {
                callback(new Error('请输入起始号码，长度为5-20位数字格式'));
                return false;
              }

              if (reg.test(value) && reg.test(endNo)) {
                let index = null;
                if (value.length > 10 || endNo.length > 10) {
                  for (let i = 0; i < endNo.length; i++) {
                    if (value[i] != endNo[i]) {
                      index = i;
                      break;
                    }
                  }
                  let aaa = value.substring(index, value.length);
                  let bbb = endNo.substring(index, endNo.length);
                  if (bbb < aaa) {
                    return callback(new Error('起始号码不能大于结束号码'));
                  }
                }
                if (endNo < value) {
                  callback(new Error('起始号码不能大于结束号码'));
                  return false;
                }
              }
              callback();
            }, tigger: 'blur'
          }
        ]
      },
      cardOprations: [
        {label: '所有卡', name: 'ALL', img1: icon_s1, img2: icon_s2, color: 'icon-color1' },
        {label: '电信', name: 'CARDTELECOM', img1: icon_d1, img2: icon_d2, color: 'icon-color2' },
        {label: '移动', name: 'CARDMOBILE', img1: icon_y1,  img2: icon_y2, color: 'icon-color3' },
        {label: '联通', name: 'CARDUNICOM', img1: icon_l1,  img2: icon_l2, color: 'icon-color4' },
        {label: '广电', name: 'CARDGUANGDIAN', img1: gaungdian,  img2: gaungdian, color: 'icon-color3' },
      ],
      dictChannelCardStatusOptions: [//卡状态列表
        {value: '', label: '请选择卡状态'},
        {value: 'ACTIVATE', label: '已激活'},
        {value: 'DEACTIVATED', label: '去激活'},
        {value: 'PAUSE', label: '停机'},
        {value: 'TERMINATED', label: '拆机'},
        {value: 'REACTIVATE', label: '重新激活'},
        // { value: 'UP_ERROR', label: '未知错误'}
        {value: 'STATUS_NONE', label: '状态未知'}
      ],//卡状态列表
      notOutOptions: [
        {value: '', label: '请选择出库状态'},
        {value: 'C_YES', label: '未出库'},
      ],
      realNameFlagOptions: [
        { value: '', label: '请选择实名状态'},
        { value: 'C_YES', label: '已实名'},
        { value: 'C_NO', label: '未实名'},
      ],//实名状态
      realNameOptions: [],    //实名通道下拉
      setMealHeadOptions: [], //套餐大类下拉
      accountOptions: [],     //通道下拉
      bindAccountOptions: [], //机卡绑定通道下拉
      tableData: [],
      tableLoading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      ascs: [],
      descs: [],
      quiteTimeFlag: false,//是否筛选静默期数据
      showBatchToLimit: false,//限速弹窗
      showChannelLimit: false,//常规限速弹窗
      showChannelCMPLimit: false,//电信Cmp限速弹窗
      channelCompanyId: '',//上游类型id
      upRateLimiting: [],//限速条件
      downRateLimiting: [],//限速条件
      upRateLimitingCMP: [],//电信CMP限速条件
      upRateLimitingSerchCMP: '',
      upRateLimitingSerch: '',
      downRateLimitingSerch: '',
      upRateLimitingDCP: [//限速条件 (电信DCP) ==>CMP
        {value: '31', label: '取消限制'},
        {value: '10', label: '1Kbps'},
        {value: '11', label: '512Kbps'},
        {value: '12', label: '1Mbps'},
        {value: '13', label: '3Mbps'},
        {value: '14', label: '5Mbps'},
        {value: '15', label: '7Mbps'},
        {value: '16', label: '10Mbps'},
        {value: '17', label: '20Mbps'},
        {value: '18', label: '30Mbps'},
        {value: '19', label: '40Mbps'},
        {value: '20', label: '50Mbps'},
        {value: '21', label: '60Mbps'},
        {value: '22', label: '70Mbps'},
        {value: '23', label: '80Mbps'},
        {value: '24', label: '90Mbps'},
        {value: '25', label: '100Mbps'},
        {value: '26', label: '110Mbps'},
        {value: '27', label: '120Mbps'},
        {value: '28', label: '130Mbps'},
        {value: '29', label: '140Mbps'},
        {value: '30', label: '150Mbps'},
        {value: '32', label: '64Kbps'},
        {value: '33', label: '256Kbps'},
      ],
      chinaMobilelimit: [
        {value: '1', label: '取消限制'},
        {value: '91', label: 'APN-AMBR=2Mbps（月初不自 动恢复）'},
        {value: '92', label: 'APN-AMBR=1Mbps（月初不自 动恢复'},
        {value: '93', label: 'APN-AMBR=512Kbps（月初不 自动恢复)'},
        {value: '94', label: 'APN-AMBR=128Kbps（月初不 自动恢复)'}
      ],
      telecomlimit: [//电信CMP限速条件 ==》DCP
        {value: '0', label: '取消限制'},
        {value: '1', label: '1kbps'},
        {value: '2', label: '64kbps'},
        {value: '3', label: '128kbps'},
        {value: '4', label: '512kbps'},
        {value: '5', label: '1Mbps'},
        {value: '6', label: '3Mbps'},
        {value: '7', label: '5Mbps'},
        {value: '8', label: '7Mbps'},
        {value: '9', label: '10Mbps'},
        {value: '10', label: '20Mbps'},
        {value: '11', label: '30Mbps'},
        {value: '12', label: '40Mbps'},
        {value: '13', label: '50Mbps'},
        {value: '14', label: '60Mbps'},
        {value: '15', label: '70Mbps'},
        {value: '16', label: '80Mbps'},
        {value: '17', label: '90Mbps'},
        {value: '18', label: '100Mbps'},
        {value: '19', label: '110Mbps'},
        {value: '20', label: '120Mbps'},
        {value: '21', label: '130Mbps'},
        {value: '22', label: '140Mbps'},
        {value: '23', label: '150Mbps'}
      ],
      unicomLimit:[
        {value: '22011447', label: '取消限速'},
        {value: '22011444', label: '取消限速'},
        {value: '22011443', label: '等级2'},
        {value: '22011442', label: '等级3'},
        {value: '22011441', label: '等级4'},
        {value: '22011440', label: '等级5'},
        {value: '22011439', label: '等级6'},
        {value: '22011438', label: '等级7'},
      ],
      card: {},
      speedArrayType: null,//是批量还是单行数据设置限速
      showChangeCardDialog: false,//换卡弹窗
      changeCardTitle: '',//换卡弹窗标题
      form: {},
      changeCardForm: {
        basePrice: '',
        overlyPrice: '',
        remark: '',
      },
      changeCardRules: {
        basePrice: [
          {required: true, message: "请输入首张卡金额", trigger: "blur"},
          {validator: validateFirstCard}
        ],
        overlyPrice: [
          {required: true, message: "请输入叠加卡金额", trigger: "blur"},
          {validator: validateMoreCard}
        ]
      },
      showBalanceDialog: false,
      balanceForm: {
        balance: null,
      },
      showCardDetailDialog: false,  //卡详情弹窗
      cardForm: {
        firstAgent: '',
        lastAgent: '',
        thirdAgent: '',
        mealArray: '',
        ICCID: '',
        dictCardOperatorName: '',
        dictChannelCardStatusName: '',
        beginTime: '',
        endTime: '',
        imsi: '',
        msisdn: '',
        cardNumber: '',
        customerNickName: '',
        // phone: '',
        // accountName: '',
        dictType: '',
        shebeihao: '',
      },  //查看卡详情
      unlockForm:{
        accountId: '',
        dictOperator: '',
        account: {},
        iccid: '',
        name: '',
        phone: '',
        msisdn: '',
        imei:'',
      },
      pagekey: '',
      actForm: {
        id: '',
        remark: '',
      },
      showRemarkDialog: false,
    }
  },
  async mounted() {
    this.pagekey = await this.$getPageKey();
    if (this.$route.query.cardNumber) {
      this.searchForm.cardNumber = this.$route.query.cardNumber;
    }
    let sessionForm = JSON.parse(sessionStorage.getItem(this.$route.path));
    if (sessionForm) {
      this.dictCardOperator = sessionForm.dictCardOperator;
      this.searchForm.cardNumber = sessionForm.cardNumber;
      this.searchForm.loginName = sessionForm.loginName;
      this.searchForm.setMealHeadId = sessionForm.setMealHeadId;
      this.searchForm.startNo = sessionForm.startNo;
      this.searchForm.endNo = sessionForm.endNo;
      this.searchForm.accountId = sessionForm.accountId;
      this.searchForm.iccid = sessionForm.iccid;
      this.searchForm.operatorNumber = sessionForm.operatorNumber;
      this.searchForm.realName = sessionForm.realName;
      this.searchForm.realNameFlag = sessionForm.realNameFlag;
      this.searchForm.notOut = sessionForm.notOut;
      this.searchForm.phone=sessionForm.searchForm
      this.ascs = sessionForm.ascs;
      this.descs = sessionForm.descs;
      this.quiteTimeFlag = sessionForm.quiteTimeFlag;
      this.dictChannelCardStatusSearch = sessionForm.dictChannelCardStatusSearch;
    }

    this.innitData();         //列表数据
    this.selectIsOEMFlag();   //查询oem类型
    this.getMealHeadOptions();//查询套餐大类列表
    this.getAccountOptions(); //查询所有通道类型
    this.getRealNameOptions(); //查询所有实名通道类型
  },
  methods: {
    // 实名模板下拉选
    async getRealNameOptions() {
      this.mainTableLoading = true;
      const returnData = await getRealnameChannelList({page:{current:1,size:9999}});
      this.realNameOptions = [ { value: '', label: '请选择实名通道'} ];
      if (returnData._result&&returnData.data.records) {
        for(let item of returnData.data.records){
          let obj = {};
          obj.value = item.id;
          obj.label = item.realnameName;
          this.realNameOptions.push(obj);
        }
      }
    },
    //机卡重绑 切换通道下拉
    changeAccount(val){
      this.unlockForm.dictOperator = val.dictOperator;
      this.unlockForm.accountId = val.value;
    },
    //导出数据
    downloadData(){
      this.$confirm('是否立即导出数据，点击确定进行下载', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let dictCardOperator = this.cardOperator === 'ALL' ? '' : this.cardOperator;
        downloadCardList({
          loginName: this.searchForm.loginName,             //客户账号
          operatorNumber: this.searchForm.operatorNumber,   //业务号码
          dictChannelCardStatus: this.searchForm.dictChannelCardStatus,//卡状态
          setMealHeadId: this.searchForm.setMealHeadId,     //套餐ID
          accountId: this.searchForm.accountId,             //通道ID
          cardNumberStart: this.searchForm.startNo,         //起始号段
          cardNumberEnd: this.searchForm.endNo,             //结束号段
          quiteTimeFlag: this.quiteTimeFlag,                //静默期(暂时只传false)
          dictCardOperator: dictCardOperator,               //中国联通、中国移动、中国电信
          notOut: this.notOut,                              //是否出库
          dictUpCompanyRealName: this.searchForm.realNameFlag,//实名状态
          realNameChannelId: this.searchForm.realName,      //实名通道
          frequency: parseInt(this.searchForm.frequency),   //充值次数

        })
        this.$confirm('正在查询中，是否立即前往任务中心查看结果?', '提示', {
          confirmButtonText: '前往任务中心',
          cancelButtonText: '留在当前页',
          type: 'warning'
        }).then(() => {
          this.$router.push({
            path: '/mission/mission'
          })
        }).catch(() => {

        });
      }).catch(() => {

      });

    },
    //table列表数据
    async innitData() {
      this.tableLoading = true;
      let dictCardOperator = this.cardOperator === 'ALL' ? '' : this.cardOperator;
      let ascs = this.ascs && this.ascs[0] === 'insertTimeDate' ? ['insertTime'] : this.ascs;
       ascs = this.ascs && this.ascs[0] === 'cardFlowActUsed' ? ['monthFlow'] : this.ascs;
      let descs = this.descs && this.descs[0] === 'insertTimeDate' ? ['insertTime'] : this.descs;
      descs = this.descs && this.descs[0] === 'cardFlowActUsed' ? ['monthFlow'] : this.descs;

      let reg = /^[1-9]\d*|0$/;
      if(this.searchForm.frequency&&!reg.test(this.searchForm.frequency)){
        this.$message.error('充值次数仅支持正整数格式');
        this.tableLoading = false;
        return false
      }
      const returnData = await crmCardList({
          loginName: this.searchForm.loginName,             //客户账号
          operatorNumber: this.searchForm.operatorNumber,   //业务号码
          dictChannelCardStatus: this.searchForm.dictChannelCardStatus,//卡状态
          setMealHeadId: this.searchForm.setMealHeadId,     //套餐ID
          accountId: this.searchForm.accountId,             //通道ID
          cardNumberStart: this.searchForm.startNo,         //起始号段
          cardNumberEnd: this.searchForm.endNo,             //结束号段
          quiteTimeFlag: this.quiteTimeFlag,                //静默期
          dictCardOperator: dictCardOperator,               //中国联通、中国移动、中国电信
          notOut: this.searchForm.notOut,                   //未出库
          realNameChannelId: this.searchForm.realName,      //实名通道
          dictUpCompanyRealName: this.searchForm.realNameFlag,//实名状态
          frequency: parseInt(this.searchForm.frequency),    //充值次数
          phone:this.searchForm.phone,
          page: {
            current: this.page.toString(),
            size: this.pageSize.toString(),
            ascs: ascs,
            descs: descs,
          }
        },
        {
          obj: this,
          key: 'tableLoading'
        });

      this.tableData = [];
      this.total = 0;
      this.$refs.selectTable.clearSelection();
      this.tableLoading = false;
      if (returnData._result) {
        this.total = returnData.data.total;

        for (let item of returnData.data.records) {
          let downLimitLabel = '';
          let upLimitLabel = '';
          item.setMealHeadName = "加载中";//套餐组名称
          item.dictChannelCardStatusName = "加载中";// 卡状态
          item.balance = item.balance === null ? "￥--" : "￥" + XEUtils.commafy(item.balance, {digits: 2});
          if (item.dictCardOperator === 'CARDTELECOM') {  //电信
            if(item.channelCompanyId == '14' || item.channelCompanyId == '47'){//CMP
              item.upRateLimiting = this.upRateLimitingDCP;
              item.downRateLimiting = [];
            }
            else{//DCP
              item.upRateLimiting = this.telecomlimit;
              item.downRateLimiting = this.telecomlimit;
            }

          } else if (item.dictCardOperator === 'CARDMOBILE') {  //移动
            item.downRateLimiting = this.chinaMobilelimit;
            item.upRateLimiting = this.chinaMobilelimit;
          }
          if (item.upRateLimiting && item.upRateLimiting.length > 0) {
            let limit = item.upRateLimiting.find(i=>{ return i.value == item.upLimit});
            upLimitLabel = limit?limit.label:'';
            downLimitLabel = limit&&item.channelCompanyId==14?limit.label:'';
            // item.upRateLimiting.forEach((limit) => {
            //   if (limit.value == item.upLimit) {
            //     upLimitLabel = limit.label;
            //     if(item.channelCompanyId==14){
            //       downLimitLabel = limit.label
            //     }
            //   }
            // });
          }
          if (item.downRateLimiting && item.downRateLimiting.length > 0 && (item.channelCompanyId!=14 || this.channelCompanyId == '47')) {
            let limit = item.downRateLimiting.find(i=>{ return i.value == item.downLimit});
            downLimitLabel = limit?limit.label:'';
            // item.downRateLimiting.forEach((limit) => {
            //   if (limit.value == item.downLimit) {
            //     downLimitLabel = limit.label
            //   }
            // });
          }

          item.updownLimitLabel = upLimitLabel + " / " + downLimitLabel;
          item.virtualUsedFlow = "加载中";
          item.cardFlowActUsed = "加载中";
          item.surplusFlowForSetMeal = "加载中";
          item.dictChannelRequestStatusName = "加载中";
          item.allFlow = "加载中";
          item.btnDisplay = false;
         // item.channelCompanyId = obj.channelCompanyId;
          this.getCardFlowInfo(item);
          /********以上代码为迭代表格数据***********/
          this.tableData.push(item)
        }
        if (this.tableData.length === 1) this.cardOperator = this.tableData[0].dictCardOperator;
        this.cardOprations.map(item=>{if(item.name==this.cardOperator)this.cardOperatorLabel=item.label});

      }
      this.cardDataAccount();
    },
    //卡板数据统计
    cardDataAccount() {
      let returnData = selectStatistics({
        loginName: this.searchForm.loginName
      }).then(returnData => {
        if (returnData._result) {
          this.totalAccount = returnData.data.cardTotalCount;
          this.warningAccount = returnData.data.quietPeriodCount;
          this.warningDay = returnData.data.quietPeriodConfig;
          this.activeAccount = returnData.data.activationCount;
          this.unActiveAccount = returnData.data.notActivationCount;
        }
      })

    },
    getCardFlowInfo(item) {
      getCardFlowInfo({id: item.id}).then(v => {
        if (v.data) {
          let obj = v.data;
          obj.dropdown = false;
          item.usedFlow = obj.usedFlow ? this.$toGB.exe(obj.usedFlow) : '0MB';
          item.allFlow = obj.allFlow ? this.$toGB.exe(obj.allFlow) : '0MB';
          item.cardFlowActUsed = obj.cardFlowActUsed ? this.$toGB.exe(obj.cardFlowActUsed) : '0MB';
          item.surplusFlowForSetMeal = obj.surplusFlowForSetMeal ? this.$toGB.exe(obj.surplusFlowForSetMeal) : '0MB';
          item.dictChannelCardStatus = obj.dictChannelCardStatus; // 卡状态值
          item.dictChannelCardStatusName = obj.dictChannelCardStatusName; // 卡状态
          item.setMealHeadName = obj.setMealHeadName;//套餐组名称
          item.realName = obj.realName;
          item.dictExamineStatusName = obj.dictExamineStatus === "USER_PASS" ? obj.customer.customerName : obj.dictExamineStatusName;// 是否实名
          //item.channelCompanyId = obj.channelCompanyId;
        }
      })

    },
    //单行数据限速
    async speedLimit(card) {
      console.log(card)
      let arrayflag = Array.isArray(card);
      console.log(arrayflag)
      let set = new Set();
      this.card = arrayflag?card[0]:card
      if(!arrayflag||(arrayflag&&card.length==1)){//当前操作为单行数据设置限速
        this.speedArrayType = false;
      }
      else{//当前操作为批量数据设置限速
        this.speedArrayType = true;
        if (this.tableChecked.length === 0) {//用户未选择任何数据
          this.$message({message: '请选择要执行批量操作的数据', type: 'error'});
          return
        }
        else{//长度不为0时需要判断选中卡channelCompanyId是否一致
          for(let item of this.tableChecked){
            set.add(item.channelCompanyId);
            if(set.size>1){
              // this.$message.error('您勾选的卡类型不一致，请核实后重新提交');
              break;
              // return false;
            }
          }
        }
      }

      if(set.size>1){
        this.$message.error('您勾选的卡类型不一致，请核实后重新提交');
        return false;
      }
      this.pagekey = await this.$getPageKey();
      this.channelCompanyId = arrayflag?card[0].channelCompanyId:card.channelCompanyId;
      console.log("channelCompanyId:"+this.channelCompanyId)
      this.upRateLimichannelCompanyIdtingCMP = [];
      this.upRateLimiting = [];
      this.downRateLimiting = [];
      this.upRateLimitingSerch = '';
      this.downRateLimitingSerch = '';
      this.upRateLimitingSerchCMP = '';
      if(this.channelCompanyId == '14' || this.channelCompanyId == '47'){//电信CMP
        console.log("开始CMP限速")
        // this.upRateLimitingCMP = this.telecomlimit
        this.upRateLimitingCMP = this.upRateLimitingDCP
      }
      else{//非电信CMP
        console.log("开始DCP限速")
        let cardOperator = arrayflag?card[0].dictCardOperator:card.dictCardOperator;
        if(cardOperator == 'CARDTELECOM'){//电信DCP
          // this.downRateLimiting = this.upRateLimitingDCP
          this.downRateLimiting = this.telecomlimit
        }
        else if(cardOperator == 'CARDMOBILE'){//移动卡
          this.downRateLimiting = this.chinaMobilelimit
        }
        else if(cardOperator == 'CARDUNICOM'){//联通卡
          this.downRateLimiting = this.unicomLimit;
        }
        this.upRateLimiting = this.downRateLimiting;
      }
      this.showBatchToLimit = true;
      // let type = '';
      // let UniteFlag = null;
      // if (arrayflag) {
      //   type = card[0].dictCardOperator;
      //   UniteFlag = card.every(item => {
      //     item.dictCardOperator !== type
      //   });
      //   if (UniteFlag) {
      //     this.$message.error('您选择的卡号列表运营商不一致，请重新选择');
      //     return false;
      //   }
      //   this.channelCompanyId = card[0].channelCompanyId;
      //   if (card[0].channelCompanyId !== '14') {//1--DCP   14--CMP
      //     if (card[0].dictCardOperator === 'CARDTELECOM') {
      //       this.downRateLimiting = this.telecomlimit
      //     } else if (card[0].dictCardOperator === 'CARDMOBILE') {
      //       this.downRateLimiting = this.chinaMobilelimit
      //     } else if (card[0].dictCardOperator === 'CARDUNICOM') {
      //       this.downRateLimiting = [];
      //     }
      //     this.upRateLimiting = this.downRateLimiting;
      //   }
      //   this.speedArrayType = true;//当前操作为批量数据设置限速
      // } else {//14--CMP
      //   this.speedArrayType = false;//当前操作为单行数据设置限速
      //   this.card = card;
      //   this.channelCompanyId = card.channelCompanyId;
      //   if (card.channelCompanyId !== '14') {
      //     if (card.dictCardOperator === 'CARDTELECOM') {
      //       this.downRateLimiting = this.telecomlimit   //电信CMP限速条件
      //     } else if (card.dictCardOperator === 'CARDMOBILE') {
      //       this.downRateLimiting = this.chinaMobilelimit//移动限速条件
      //     } else if (card[0].dictCardOperator === 'CARDUNICOM') {//联通
      //       this.downRateLimiting = [];
      //     }
      //     this.upRateLimiting = this.downRateLimiting;
      //   }
      // }
      // this.showBatchToLimit = true;
    },
    handleCommand(row) {
      row.btnDisplay = !row.btnDisplay
    },


    //批量 + 行尾操作
    async doSomeAct(item, name, status) {
      this.pagekey = await this.$getPageKey();
      let _this = this;
      if (status > 11 && status < 16 &&this.tableChecked.length === 0) {
        this.$message({message: '请选择要执行批量操作的数据', type: 'error'});
        return
      }
      //跳转路由====>>跳转至综合详情
      if (status === 1) {
        this.$router.push({path: '/card/cardDetailIndex', query: {cardId: item.id, cardNumber: item.cardNumber}});
        return
      }
      let ids = [];
      this.$confirm(`是否继续执行 ${name} 操作？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let pauseCards = null;
        //批量操作
        switch (status) {
          case 2:
            //卡板行尾====>>数据刷新
            let array = [];
            let obj = {};
            obj.id = item.id;
            obj.msisdn = item.msisdn;
            obj.iccid = item.iccid;
            obj.imsi = item.imsi;
            obj.accountId = item.accountId;
            array.push(obj);
            this.bathReresh(array);
            break;
          case 3:
            //卡板行尾====>>数据停机
            ids = [item.id];
            this.bathStop(ids);
            break;
          case 4:
            //卡板行尾====>>数据激活
            ids = [item.id];
            let returnData = await activationCardHandle({ids}, {pagekey: this.pagekey});
            if (returnData._result) {
              this.$message({
                type: 'success',
                message: '当前卡号激活成功！'
              })
            }
            this.innitData();
            break;
          case 5:
            //卡板行尾====>>待激活
            ids = [item.id];
            let returnDatadjh = await toBeActivatedCardHandle({ids}, {pagekey: this.pagekey});
            if (returnDatadjh._result) {
              this.$message({
                type: 'success',
                message: '当前卡号待激活设置成功'
              });
              this.innitData()
            }
            break;
          case 6:
            //卡板行尾/批量====>>限速
            let arr_limit = [];
            if (_this.speedArrayType) {

              for (let item of this.tableChecked) {
                let obj_limit = {};
                obj_limit.id = item.id;
                if (_this.card.channelCompanyId == 14  || this.channelCompanyId == '47') {//电信CMP
                  obj_limit.upLimit = this.upRateLimitingSerchCMP;
                  obj_limit.downLimit = '';
                } else {
                  obj_limit.upLimit = this.upRateLimitingSerch;
                  obj_limit.downLimit = this.downRateLimitingSerch;
                }
                arr_limit.push(obj_limit)
              }
              _this.bathLimitSpeed(arr_limit);
            } else {
              let obj_limit = {};
              obj_limit.id = _this.card.id;
              if (this.card.channelCompanyId == 14   || this.channelCompanyId == '47') {
                obj_limit.upLimit = _this.upRateLimitingSerchCMP;
                obj_limit.downLimit = '';
              } else {
                obj_limit.upLimit = _this.upRateLimitingSerch;
                obj_limit.downLimit = _this.downRateLimitingSerch;
              }
              arr_limit.push(obj_limit);
              _this.bathLimitSpeed(arr_limit);
            }

            break;
          case 7:
            //行尾按钮====>>换卡
            this.$refs.changeCardForm.validate((valid) => {
              if (valid) {
                let s = markCardChangeFlag({
                  cardNumberStart: this.card.cardNumber,
                  cardNumberEnd: this.card.cardNumber,
                  remark: this.changeCardForm.remark,         //备注
                  basePrice: this.changeCardForm.basePrice,   // 首张金额
                  overlyPrice: this.changeCardForm.overlyPrice// 叠加金额
                }, {pagekey: this.pagekey}).then(res => {
                  this.showChangeCardDialog = false;
                  if (res.code === 10000) {
                    this.$message.success("操作成功！");
                    this.innitData();
                  }
                })
              }
            });
            break;
          case 8:
            // 行尾按钮====>>取消换卡
            cancelChange({id: item.id}, {pagekey: this.pagekey}).then(res => {
              if (res.code === 10000) {
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                this.innitData();
              }
            });
            break;
          case 9:
            //行尾按钮====>>更改余额
            let changeBalance = await updateCardBalance({
              id: this.card.id,
              balance: this.balanceForm.balance
            }, {pagekey: this.pagekey});
            if (changeBalance._result) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.showBalanceDialog = false;
              this.innitData();
            }
            break;
          case 10:
            //行尾按钮====>>重置换卡次数
            resetChangeCount({id: item.id}, {pagekey: this.pagekey}).then(v => {
              this.$message.success("操作成功！");
              this.innitData();
            });
            break;
          case 11:
            //行尾按钮====>>重置手机号
            resetPhoneNumber({id: item.id}, {pagekey: this.pagekey}).then(v => {
              this.$message.success("操作成功！");
              this.innitData();
            });
            break;
          case 12:
            //批量停机====>>只有激活和待激活的卡可以设置批量停机
            pauseCards = this.tableChecked.every(item => {
              return item.dictChannelCardStatus !== 'ACTIVATE' && item.dictChannelCardStatus !== 'DEACTIVATED'
            }); //this.tableChecked是否每个对象都是'PAUSE'的状态
            if (pauseCards) {
              this.$message({message: '只有激活和待激活的卡可以设置批量停机', type: 'error'})
            } else {
              let ids = this.tableChecked.filter(item => item.dictChannelCardStatus === 'ACTIVATE' || item.dictChannelCardStatus === 'DEACTIVATED').map(item => {
                return item.id
              });
              if (ids) this.bathStop(ids);
            }
            break;
          case 13:
            //批量激活====>>只有停机和待激活的卡可以设置批量激活
            pauseCards = this.tableChecked.every(item => {
              return item.dictChannelCardStatus !== 'PAUSE' && item.dictChannelCardStatus !== 'DEACTIVATED'
            }); //this.tableChecked是否每个对象都是'ACTIVATE'的状态
            if (pauseCards) {
              this.$message({message: '只有停机和待激活的卡可以设置批量激活', type: 'error'});
              return
            }
            ids = this.tableChecked.filter(item => item.dictChannelCardStatus !== 'ACTIVATE').map(item => {
              return item.id
            });
            let actRes = await activationCardHandle({
              ids: ids
            }, {pagekey: this.pagekey});
            if (actRes._result) {
              this.$message({message: '批量设置激活成功', type: 'success'});
              this.innitData();
            }
            break;
          case 14:
            //批量待激活===>>只有激活的卡可以设置批量待激活
            pauseCards = this.tableChecked.every(item => {
              return item.dictChannelCardStatus !== 'ACTIVATE'
            }); //this.tableChecked是否每个对象都是'ACTIVATE'的状态
            if (pauseCards) {
              this.$message({message: '只有激活的卡可以设置批量待激活', type: 'error'})
            } else {
              let returnData = await toBeActivatedCardHandle({
                ids: this.tableChecked.filter(item => item.dictChannelCardStatus === 'ACTIVATE' || item.dictChannelCardStatus === 'DEACTIVATED').map(item => {
                  return item.id
                })
              }, {pagekey: this.pagekey});
              if (returnData._result) {
                this.$message({message: '批量设置待激活成功', type: 'success'});
                this.innitData();
              }
            }
            break;
          case 15:
            //批量更新===>>
            let arrays = this.tableChecked.map(item => {
              const obj = {};
              obj.id = item.id;
              obj.msisdn = item.msisdn;
              obj.iccid = item.iccid;
              obj.imsi = item.imsi;
              obj.accountId = item.accountId;
              return obj
            });
            this.bathReresh(arrays);
            break;
          case 16:
            //单行执行修改备注
            let res = await updateCardRemark({
              id: this.actForm.id,
              remark: this.actForm.remark
            })
            if(res.code==10000){
              this.showRemarkDialog = false;
              this.$message({
                type: 'success',
                message: '备注修改成功'
              })
              this.innitData();
            }
            else{
              this.$message.error('备注修改失败')
            }

        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    //限速接口
    async bathLimitSpeed(arr) {
      let returnDataLimit = await singleUpdate(arr, {pagekey: this.pagekey});
      if (returnDataLimit._result) {
        this.$message({message: '设置成功', type: 'success'});
        this.showBatchToLimit = false;
      } else {
        this.$message({message: '设置失败，请您稍后重试', type: 'error'});
        this.showBatchToLimit = false
      }
      this.upRateLimitingSerchCMP = '';
      this.upRateLimitingSerch = '';
      this.downRateLimitingSerch = '';
      this.innitData();
    },
    //刷新接口
    async bathReresh(arr) {
      let returnData = await refresh(arr, {pagekey: this.pagekey});
      if (returnData._result) {
        this.$message({message: '刷新成功', type: 'success'})
      } else {
        this.$message({message: '刷新失败，请您稍后重试', type: 'error'})
      }
      this.innitData();
      this.pagekey = await this.$getPageKey();
    },
    //停机（批量+行尾）
    async bathStop(ids) {
      let returnData = await stopCardHandle({
        ids: ids
      }, {pagekey: this.pagekey});
      if (returnData._result) {
        if (ids.length > 1) this.$message({message: '设置批量停机成功', type: 'success'});
        if (ids.length === 1) this.$message({message: '当前卡号已停机', type: 'success'});
      }
      this.innitData();
      this.pagekey = await this.$getPageKey();
    },
    //换卡
    async changeCard(card) {
      this.pagekey = await this.$getPageKey();
      this.showChangeCardDialog = true;
      this.changeCardTitle = "确认换卡";
      this.card = card;
      this.changeCardForm.basePrice = '';
      this.changeCardForm.overlyPrice = '';
      this.changeCardForm.remark = "";
      this.$refs.changeCardForm.resetFields();
    },
    //点击修改余额
    async changeCardBalance(card) {
      this.card = card;
      this.showBalanceDialog = true;
      this.balanceForm.balance = null;
    },
    //点击行尾按钮 修改卡板备注
    changeCardRemark(card){
      this.card = card;
      this.actForm.id = card.id;
      this.actForm.remark = card.remarks;
      this.showRemarkDialog = true;
    },
    //点击执行查看详情按钮
    async getCardDetail(card) {
      let returnData = await getCardDetail({id: card.id});
      if (returnData._result) {
        this.cardForm.firstAgent = returnData.data.firstAgent;
        this.cardForm.lastAgent = returnData.data.lastAgent;
        this.cardForm.thirdAgent = returnData.data.thirdAgent;
        this.cardForm.mealArray = returnData.data.mealArray;
        this.cardForm.ICCID = returnData.data.iccid;
        this.cardForm.dictCardOperatorName = returnData.data.dictCardOperatorName;
        this.cardForm.dictChannelCardStatusName = returnData.data.dictChannelCardStatusName;
        this.cardForm.beginTime = returnData.data.beginTime;
        this.cardForm.endTime = returnData.data.endTime;
        this.cardForm.imsi = returnData.data.imsi;
        this.cardForm.msisdn = returnData.data.msisdn;
        this.cardForm.cardNumber = returnData.data.cardNumber;
        this.cardForm.customerNickName = returnData.data.customerNickName;
        this.cardForm.phone = returnData.data.phone;
        this.cardForm.accountName = returnData.data.accountName;
        this.cardForm.dicTypeL = returnData.data.account.dicType;//卡类型
        this.cardForm.shebeihao = returnData.data.dongleNum;//设备号
      }

      this.showCardDetailDialog = true
    },
    //关闭卡详情弹窗
    closeCardForm(formName) {
      this.$refs[formName].resetFields();
      this.showCardDetailDialog = false;
    },
    //点击底部统计数据执行方法
    doSearch(status) {
      // if (status === 'WARNING') {
      //   // this.quiteTimeFlag = true;
      //   this.quiteTimeFlag = false;
      // } else {
      //   this.dictChannelCardStatusSearch = status;
      // }
      // this.innitData();
    },
    //重置搜索条件
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.searchForm.endNo = '';
      this.searchForm.notOut = '';
      this.cardOperator = 'ALL';
      sessionStorage.removeItem(this.$route.path);
    },
    //点击查询按钮 执行sessionStorage存储数据并查询操作
    searchData() {
      let _this = this;
      this.$refs.searchForm.validate((valid) => {
        if (valid) {
          _this.page = 1;
          _this.setSession()
        } else {
          return false;
        }
      });

    },

    //存储缓存
    setSession(){
      let _this = this;
      let sessionForm = {};
      sessionForm.page = _this.page;
      sessionForm.size = _this.pageSize;
      sessionForm.ascs = _this.ascs ? _this.ascs : [];
      sessionForm.descs = _this.descs ? _this.descs : [];
      sessionForm.cardOperator = _this.cardOperator ? _this.cardOperator : 'ALL';
      sessionForm.quiteTimeFlag = _this.quiteTimeFlag ? _this.quiteTimeFlag : false;//是否筛选静默期预警条件
      sessionForm.loginName = _this.searchForm.loginName ? _this.searchForm.loginName : '';//代理账号
      sessionForm.dictChannelCardStatus = _this.searchForm.dictChannelCardStatus?_this.searchForm.dictChannelCardStatus : '';//卡状态
      sessionForm.operatorNumber = _this.searchForm.operatorNumber ? _this.searchForm.operatorNumber : '';//业务号码
      sessionForm.cardNumber = _this.searchForm.cardNumber ? _this.searchForm.cardNumber : ''; //带入的参cardnumber
      sessionForm.startNo = _this.searchForm.startNo ? _this.searchForm.startNo : ''; //起始号码
      sessionForm.endNo = _this.searchForm.endNo ? _this.searchForm.endNo : ''; //结束号码
      sessionForm.setMealHeadId = _this.searchForm.setMealHeadId ? _this.searchForm.setMealHeadId : ''; //套餐大类
      sessionForm.accountId = _this.searchForm.accountId ? _this.searchForm.accountId : ''; //通道id
      sessionForm.out = _this.searchForm.accountId ? _this.searchForm.accountId : ''; //通道id
      sessionForm.notOut = _this.searchForm.notOut ? _this.searchForm.notOut : ''; //未出库标识
      sessionForm.realNameFlag = _this.searchForm.realNameFlag ? _this.searchForm.realNameFlag : ''; //实名状态
      sessionForm.realName = _this.searchForm.realName ? _this.searchForm.realName : ''; //实名通道
      sessionForm.phone = _this.searchForm.phone ? _this.searchForm.phone : ''; //实名通道
      sessionStorage.setItem(_this.$route.path, JSON.stringify(sessionForm));
      this.innitData();
    },

    //获取底部统计数据
    async getAccountOptions() {
      const returnData = await initAccountSelect({});
      this.accountOptions = [
        {value: '', label: '请选择通道'}
      ];
      if (returnData._result) {
        for (let item of returnData.data) {
          let obj = {};
          obj.value = item.id;
          obj.label = item.accountName;
          this.accountOptions.push(obj);
        }
        for(let item of returnData.data){
          let obj = {};
          obj.value = item.id;
          obj.label = item.accountName;
          obj.dictOperator = item.dictOperator;
          this.bindAccountOptions.push(obj);
        }
      }
    },
    //获取套餐大类下拉
    async getMealHeadOptions() {
      let returnData = await initSetMealHeadSelect({});
      this.setMealHeadOptions = [
        {value: '', label: '请选择套餐大类'}
      ];
      if (returnData._result) {
        for (let item of returnData.data) {
          const obj = {};
          obj.value = item.id;
          obj.label = item.name;
          this.setMealHeadOptions.push(obj);
        }
      }
    },
    //切换卡运营商类别选项卡
    handleClick(name) {
      this.cardOperator = name
      this.setSession();
    },
    //关联代理账号
    async querySearch(queryString, cb) {
      let returnData = await getLoginName({
        loginname: this.searchForm.loginName
      });
      if (returnData._result) {
        this.loginNames = [];
        for (let item of returnData.data) {
          this.loginNames.push({'value': item})
        }
      }
      cb(this.loginNames);
    },
    //刷新数据
    refreshPage() {
      this.page = 1;
      this.innitData();
    },

    copy(message) {
      let that = this;
      this.$copyText(message).then(function (e) {
        that.$message.success('复制成功');
      }, function (e) {
        that.$message.fail('复制失败');
      })
    },
    async selectIsOEMFlag() {
      let returnData = await selectIsOEMFlag({});
      if (returnData._result) {
        this.oemFlag = returnData.data.oemFlag;
        if (this.oemFlag === 'OEM') {
          this.operatorNumberPlaceholder = '业务号码/ICCID/IMSI/MSISDN'
        } else if (this.oemFlag === 'AGENT') {
          this.operatorNumberPlaceholder = '业务号码/ICCID'
        }
      }
    },
    changeSort(column) {
      if (column.order === 'ascending') {
        this.descs = [];
        this.ascs = [column.prop];
      } else {
        this.ascs = [];
        this.descs = [column.prop];
      }
      this.innitData();
    },
    changPage(val) {
      this.page = val;
      this.innitData();
    },
    changSize(val) {
      this.pageSize = val;
      this.page = 1;
      this.innitData();
    },
    handleSelectionChange(val) {
      this.tableChecked = val;
    },
    getRowKeys(row) {
      return row.id
    },
    //  打开机卡解绑弹窗
    async UnlockCard(formName){
      this.pagekey = await this.$getPageKey();
      this.showUnlockDialog = true;
      this.$nextTick(()=>{
        this.$refs[formName].resetFields();
      })
    },
    //通过iccid查询msisdn
    getMsisdn(){
      if(!this.unlockForm.iccid){
        this.$message.error('请输入iccid')
      }
      else{
        searchMsisdn({iccid:this.unlockForm.iccid}).then(res=>{
          if(res.code==10000){
            this.unlockForm.msisdn = res.data.msisdn
          }
        })
      }
    },
    //机卡解绑数据提交
    unlockSubmit(){
      this.$refs.unlockForm.validate(async (valid)=>{
        if(valid){
          await cardUnlockForOem({
            accountId: this.unlockForm.accountId,
            iccid: this.unlockForm.iccid,
            msisdn: this.unlockForm.msisdn,
            name: this.unlockForm.name,
            phone: this.unlockForm.phone,
            imei:this.unlockForm.imei,
            pagekey: this.pagekey
          })
          this.$message({
            type: 'success',
            message: '提交成功，请到详情下的卡操作记录查看',
          })
          this.showUnlockDialog = false
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.row_top {
  width: 100%;
  height: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.row_top_1 {
  width: 700px;
  height: auto;
  position: relative;
}

.row_top_2 {
  width: 800px;
  height: auto;
  position: relative;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-right: 10px;
}

.row_top_item {
  display: inline-flex;
  align-items: center;
}

.row_top_item img {
  margin-left: 5px;
}

.cardNumberContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn_text {
  cursor: pointer;
  transition: all .5s ease;
}

.btn_text_none {
  color: #c02122;
  padding: 0 5px;
}

.btn_text_none:hover {
  color: red;
  -moz-transition: all .5s ease-in;
  -webkit-transition: all .5s ease-in;
  -o-transition: all .5s ease-in;
  transition: all .5s ease-in;
}
.icon-color1{
  color: #F4943C;
  border: 1.5px solid #F4943C;
}
.icon-color2{
  color: #13227a;
  border: 1.5px solid #13227a;
}
.icon-color3{
  color: #1C74FC;
  border: 1.5px solid #1C74FC;
}
.icon-color4{
  color: #AC1C34;
  border: 1.5px solid #AC1C34;
}
.row-main-table::-webkit-scrollbar {
  //display: block !important;
  //width: 5px;
  //height: 20px;
  min-width: 1300px;
  overflow: auto !important;
}
</style>
